<template>
	<view class="ljapp coupon-list">
		<view class="content">
			<view class="list">
				<view class="item u-flex" :class="'status'+item.statusz" v-for="(item,index) in group.list" :key="index" @click="onSelect(item)">
					<view class="price u-flex u-flex-center u-flex-y-center">
						<view>
							<!--  -->
							<view style="text-align: center;"><text>￥</text>{{parseFloat(item.value)}}</view>
							<view class="tip">{{item.least>0?'满'+parseFloat(item.least)+'元可用':'无金额门槛'}}</view>
						</view>
					</view>
					<view class="info u-flex-fill">
						<view class="tit">{{item.title}}</view>
						<view class="code">兑换码：{{item.verify_code}}</view>
						<view class="time">
							<block v-if="item.sdate==item.edate">{{item.edate}}到期</block>
							<block v-else>有效期：{{item.edate}}</block>
						</view>
						<view class="tip">使用范围：{{item.tip}}</view>
					</view>
					<view class="rbox u-flex u-flex-end u-flex-items-end">
						<view class="btn-capsule" v-if="!item.statusz">选择</view>
						<image class="sticker" :src="'pagesL/static/coupon/status'+item.statusz+'.png'" mode="aspectFill" v-else></image>
					</view>
				</view>
			</view>
			
			<lj-empty v-if="group.loaded&&group.list.length<=0">暂无优惠券</lj-empty>
			<view v-else>
				<u-loadmore
					:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
					fontSize="28rpx"
					color="#d9d9d9"
					nomoreText="已加载全部"
					marginTop="30rpx"
					marginBottom="0"
					@loadmore="getList"
				></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				group:{
					page: 1,
					limit: 10,
					list: [],
					loaded: false,
				},
				loading: false,
				
				type: 0,
				price: 0,
			}
		},
		onLoad(options) {
			if(options.type) this.type = options.type
			if(options.price) this.price = options.price
			
			this.init()
		},
		methods: {
			init(){
				this.group.page = 1
				this.group.list = []
				this.group.loaded = false
				this.loading = false
			
				this.getList();
			},
			getList(){
				var that = this, group = that.group;
				if(that.loading || group.loaded) return;
			
				that.loading = true
			
				this.$Http({
					url: 'getCouponSelect',
					data: {
						page: group.page,
						limit: group.limit,
						
						type: this.type,
						price: this.price,
					},
					type:'POST',
				}).then(res=>{
					if(res.code == 1){
						var list = res.data;
						group.loaded = list.length < group.limit;
						group.page ++;
						group.list = group.list.concat(list);
					}
					
					that.loading = false
				}).catch(()=>{
					that.loading = false
				});
			},
			onReachBottom(){
				this.getList()
			},
			onSelect(item){
				console.log('onSelect',item)
				this.$store.commit('selectCouponobj', item)
				
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="less">
	@import '@/pagesL/style.less';
	
	.coupon-list .content{
		padding-top: 20rpx;
	}
</style>
